<template>
<el-row :gutter="10">
  <el-col :span="18">
    <div class="grid-content bg-purple">
        
         
                <el-col class="grid-bg">
                  <div  id="vertical" :span="24" style="width:100%; height:200px;"></div>
                </el-col>
       
    
      </div>
    </el-col>
     

</el-row>
</template>

<script>
import echarts from "echarts";

export default {
  data() {
    return {
      chartColumn: null,
      vertical: null
    };
  },

  methods: {
    drawvertical1() {
    
    //   this.vertical = echarts.init(document.getElementById("vertical"));
    //   this.vertical.setOption(
    //     (option = {
    //       title: {
    //         text: "Beijing AQI"
    //       },
    //       tooltip: {
    //         trigger: "axis"
    //       },
    //       xAxis: {
    //         data: data.map(function(item) {
    //           return item[0];
    //         })
    //       },
    //       yAxis: {
    //         splitLine: {
    //           show: false
    //         }
    //       },
    //       toolbox: {
    //         left: "center",
    //         feature: {
    //           dataZoom: {
    //             yAxisIndex: "none"
    //           },
    //           restore: {},
    //           saveAsImage: {}
    //         }
    //       },
    //       dataZoom: [
    //         {
    //           startValue: "2014-06-01"
    //         },
    //         {
    //           type: "inside"
    //         }
    //       ],
    //       visualMap: {
    //         top: 10,
    //         right: 10,
    //         pieces: [
    //           {
    //             gt: 0,
    //             lte: 50,
    //             color: "#096"
    //           },
    //           {
    //             gt: 50,
    //             lte: 100,
    //             color: "#ffde33"
    //           },
    //           {
    //             gt: 100,
    //             lte: 150,
    //             color: "#ff9933"
    //           },
    //           {
    //             gt: 150,
    //             lte: 200,
    //             color: "#cc0033"
    //           },
    //           {
    //             gt: 200,
    //             lte: 300,
    //             color: "#660099"
    //           },
    //           {
    //             gt: 300,
    //             color: "#7e0023"
    //           }
    //         ],
    //         outOfRange: {
    //           color: "#999"
    //         }
    //       },
    //       series: {
    //         name: "Beijing AQI",
    //         type: "line",
    //         data: data.map(function(item) {
    //           return item[1];
    //         }),
    //         markLine: {
    //           silent: true,
    //           data: [
    //             {
    //               yAxis: 50
    //             },
    //             {
    //               yAxis: 100
    //             },
    //             {
    //               yAxis: 150
    //             },
    //             {
    //               yAxis: 200
    //             },
    //             {
    //               yAxis: 300
    //             }
    //           ]
    //         }
    //       }
    //     })
    //   );
    },
    drawCharts() {
      this.drawColumnChart();
    }
  },

  mounted: function() {
    this.drawvertical1();
  },
  updated: function() {
    this.drawCharts();
  }
};
</script>
<style scoped lang="scss">
@import "~scss_vars";

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>